<template>
  <div>
    <div style="background-color: #4E3756;width: 100%;height: 375px">
      <div style="width: 45%;margin: 0 auto">
        <img :src="`${$store.state.movie.mimg}`" class="img">
        <div class="info">
          <p class="name">{{ $store.state.movie.mname }}</p>
          <p class="class">
            <span v-for="(item,index) of $store.state.movie.mclass.split('/')" :key="index"
                  style="margin-right: 4px">{{ item }}</span>
          </p>
          <p class="nation">导演:{{ $store.state.movie.mpeople }}   {{ $store.state.movie.mduration }}分钟</p>
          <p class="time">{{ $store.state.movie.mtime }}</p>
          <p>
            <button class="btn" @click="showCommentDialog"><i class="el-icon-edit"></i>评分</button>
            <button class="btn" @click="handleFavorite('add')" v-if="!$store.state.isFavorite"><i
                class="iconfont icon-kongxin"
                style="font-size: 22px;vertical-align: middle;margin-right: 3px"></i>收藏
            </button>
            <button class="btn" @click="handleFavorite('del')" v-else><i class="iconfont icon-aixin"
                                                                         style="font-size: 16px;color: red;margin-right: 3px"></i>已收藏
            </button>
          </p>
          <button class="buy" @click="showSession" v-show="$route.path=='/UserHomePage/MovieDetail'">选座购票</button>
          <button class="buy" @click="handleBack" v-show="$route.path=='/UserHomePage/MovieDetail/MovieSession'">
            更多电影详情
          </button>
        </div>
      </div>
    </div>
    <router-view></router-view>


    <el-dialog
        class="comment-dialog"
        :visible.sync="isShowCommentDialog"
        width="40%">
      <template slot="title">
        <p style="text-align: center;font-weight: 500;font-size: 20px;padding: 0;margin: 0 auto">电影评分</p>
      </template>
      <el-row>
        <div style="margin: 0 auto;text-align: center;width: 100%;height: 70px">
          <p class="grade-num" v-show="grade!=0">{{ grade * 2 }}</p>
          <el-rate
              :allow-half="true"
              v-model.number="grade"
              :show-text="true">
          </el-rate>
        </div>
      </el-row>
      <div style="width: 90%;margin: 0 auto">
        <div id="editor"></div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="isShowCommentDialog = false">取 消</el-button>
    <el-button type="primary" @click="addComment">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import requests from "@/api/request";
import E from 'wangeditor'
let editor;
export default {
  name: "MovieDetail",
  data() {
    return {
      isShowCommentDialog: false,
      grade: 0,
      content: '',
      isFavorite: false
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },
    showSession() {
      this.$router.push({name: 'MovieSession'})
    },
    showCommentDialog() {
      if (JSON.stringify(this.$store.state.user) == '{}') {
        this.$alert("请您登入后评论!")
      } else {
        this.isShowCommentDialog = true
        this.$nextTick(()=>{
          editor = new E("#editor")
          // editor.config.uploadFileName='file'
          // editor.config.uploadImgServer='/api/editor'
          editor.create()
        })
      }
    },
    handleFavorite(type) {
      if (JSON.stringify(this.$store.state.user) == '{}') {
        this.$router.push("/out")
      } else {
        requests({
          method: 'post',
          url: '/api/AddFavorite',
          params: {uid: this.$store.state.user.uid, mid: this.$store.state.movie.id, type: type}
        }).then((response) => {
          if (response.data.isError) {
            this.$message.error(response.data.message)
          } else {
            this.$message.success(response.data.message)
          }
          this.$store.state.isFavorite=response.data.isFavorite
        })
      }
    },
    addComment() {
      if (editor.txt.html().trim() == '') {
        this.$message.warning("请输入内容!")
      } else if (this.grade == 0) {
        this.$message.warning("请评分后再提交评论!")
      } else {
        requests({
          method: 'post',
          url: '/api/AddComment',
          params: {
            mid: this.$store.state.movie.id,
            uid: this.$store.state.user.uid,
            content: editor.txt.html(),
            status:0,
            grade: this.grade * 2
          }
        }).then((res) => {
          if (res.data.code===200){
            this.$message.success("评论成功!")
            this.isShowCommentDialog = false
            this.grade=0
            editor.txt.clear()
            requests({
              method: 'get',
              params: {uid: this.$store.state.user.uid, mid: this.$store.state.movie.id},
              url: '/api/GetCommentList',
            }).then(response => {
              this.$store.state.commentList = response.data
              this.$store.state.commentList = this.$store.state.commentList.map(function (item) {
                item.grade = item.grade / 2;
                return item;
              })
            })
          }else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  },
  created() {
    requests({
      method: 'get',
      params: {
        uid: JSON.stringify(this.$store.state.user) == '{}' ? 0 : this.$store.state.user.uid,
        mid: this.$store.state.movie.id
      },
      url: '/api/GetCommentList',
    }).then(response => {
      this.$store.state.commentList = response.data
      this.$store.state.commentList = this.$store.state.commentList.map(function (item) {
        item.grade = item.grade / 2;
        return item;
      })
    })
    requests({
      method: 'get',
      params: {
        uid: JSON.stringify(this.$store.state.user) == '{}' ? 0 : this.$store.state.user.uid,
        mid: this.$store.state.movie.id
      },
      url: '/api/IsExistFavorite',
    }).then(response => {
      this.$store.state.isFavorite=response.data
    })
  }
}
</script>

<style scoped>
.img {
  width: 232px;
  height: 322px;
  border: 5px solid white;
  margin-top: 60px;
  vertical-align: top;
}

.info {
  display: inline-block;
  margin-left: 25px;
  margin-top: 50px;
}

.info p {
  color: white;
}

.name {
  font-size: 26px;
  font-weight: 700;
}

.btn {
  border-radius: 3px;
  background-color: #756189;
  width: 90px;
  height: 36px;
  line-height: 30px;
  display: inline-block;
  border: none;
  cursor: pointer;
  margin-right: 15px;
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.buy {
  border-radius: 3px;
  background-color: #df2d2d;
  width: 195px;
  height: 36px;
  line-height: 30px;
  display: inline-block;
  border: none;
  cursor: pointer;
  margin-right: 15px;
  font-size: 15px;
  font-weight: 600;
  color: white;
}

/deep/ .el-rate__icon {
  font-size: 31px;
}

/deep/ .el-rate__text {
  font-size: 20px;
  color: rgb(247, 186, 42) !important;
}

.grade-num {
  text-align: center;
  margin: 0 auto;
  padding: 0;
  color: rgb(247, 186, 42);
  font-size: 20px;
  font-style: italic;
  font-weight: 600
}

</style>